<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 标题区域 -->
      <view class="header">
        <view class="header-main">
          <text class="title">用电数据分析</text>
          <text class="subtitle">多维度用电数据统计与分析</text>
        </view>
        <view class="date-indicator">
          <text class="current-date">{{ getCurrentDate() }}</text>
        </view>
      </view>
      
      <!-- 查询条件卡片 -->
      <view class="card query-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">查询条件</text>
            <text class="card-subtitle">选择时间范围查看详细数据</text>
          </view>
          <view class="card-icon">
            <text class="iconfont">🔍</text>
          </view>
        </view>
        
        <view class="query-content">
          <!-- 查询类型选择 -->
          <view class="query-type-selector">
            <view 
              v-for="qtype in queryTypes" 
              :key="qtype.value"
              class="type-option"
              :class="{ 
                'type-active': queryType === qtype.value,
                'type-first': qtype.value === 'day',
                'type-last': qtype.value === 'year'
              }"
              @tap="changeQueryType(qtype.value)"
            >
              <text class="type-text">{{ qtype.label }}</text>
              <view class="type-indicator" v-if="queryType === qtype.value"></view>
            </view>
          </view>
          
          <!-- 日期范围选择 -->
          <view class="date-range-selector">
            <!-- 日范围选择 -->
            <view v-if="queryType === 'day'" class="date-picker-group">
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">开始日期</text>
                  <text class="picker-hint">选择查询起始日期</text>
                </view>
                <picker 
                  mode="date" 
                  :value="dayStartDate" 
                  @change="onDayStartDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(dayStartDate, 'day') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
              
              <view class="date-separator">
                <text class="separator-line">—</text>
              </view>
              
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">结束日期</text>
                  <text class="picker-hint">选择查询结束日期</text>
                </view>
                <picker 
                  mode="date" 
                  :value="dayEndDate" 
                  @change="onDayEndDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(dayEndDate, 'day') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
            </view>
            
            <!-- 月范围选择 -->
            <view v-if="queryType === 'month'" class="date-picker-group">
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">开始月份</text>
                  <text class="picker-hint">选择查询起始月份</text>
                </view>
                <picker 
                  mode="date" 
                  fields="month"
                  :value="monthStartDate" 
                  @change="onMonthStartDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(monthStartDate, 'month') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
              
              <view class="date-separator">
                <text class="separator-line">—</text>
              </view>
              
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">结束月份</text>
                  <text class="picker-hint">选择查询结束月份</text>
                </view>
                <picker 
                  mode="date" 
                  fields="month"
                  :value="monthEndDate" 
                  @change="onMonthEndDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(monthEndDate, 'month') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
            </view>
            
            <!-- 年范围选择 -->
            <view v-if="queryType === 'year'" class="date-picker-group">
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">开始年份</text>
                  <text class="picker-hint">选择查询起始年份</text>
                </view>
                <picker 
                  mode="date" 
                  fields="year"
                  :value="yearStartDate" 
                  @change="onYearStartDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(yearStartDate, 'year') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
              
              <view class="date-separator">
                <text class="separator-line">—</text>
              </view>
              
              <view class="date-picker-item">
                <view class="picker-header">
                  <text class="picker-label">结束年份</text>
                  <text class="picker-hint">选择查询结束年份</text>
                </view>
                <picker 
                  mode="date" 
                  fields="year"
                  :value="yearEndDate" 
                  @change="onYearEndDateChange"
                  class="date-picker"
                >
                  <view class="picker-value">
                    <text class="picker-date">{{ formatDisplayDate(yearEndDate, 'year') }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
            </view>
          </view>
          
          <!-- 查询按钮 -->
          <view class="query-btn-container">
            <button class="query-btn" :class="{ 'query-btn-loading': isLoading }" @tap="handleQuery" :disabled="isLoading">
              <text class="btn-text" v-if="!isLoading">查询数据</text>
              <view class="loading-spinner" v-else>
                <text class="loading-text">查询中</text>
                <view class="spinner"></view>
              </view>
            </button>
          </view>
        </view>
      </view>
      
      <!-- 数据统计概览 -->
      <view class="card stats-overview-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">数据概览</text>
            <text class="card-subtitle">当前查询范围内的用电统计</text>
          </view>
          <view class="card-icon stats-icon">
            <text class="iconfont">📊</text>
          </view>
        </view>
        
        <view class="stats-overview">
          <view class="overview-item" @tap="showStatDetail('total')">
            <view class="overview-icon total-icon">
              <text class="iconfont">⚡</text>
            </view>
            <view class="overview-content">
              <text class="overview-label">总用电量</text>
              <text class="overview-value">{{ totalUsage }}</text>
              <text class="overview-unit">kWh</text>
            </view>
            <view class="overview-trend" v-if="totalTrend !== 0">
              <text class="trend-icon" :class="totalTrend > 0 ? 'trend-up' : 'trend-down'">
                {{ totalTrend > 0 ? '↗' : '↘' }}
              </text>
              <text class="trend-value" :class="totalTrend > 0 ? 'trend-up' : 'trend-down'">
                {{ Math.abs(totalTrend) }}%
              </text>
            </view>
          </view>
          
          <view class="overview-item" @tap="showStatDetail('average')">
            <view class="overview-icon average-icon">
              <text class="iconfont">📈</text>
            </view>
            <view class="overview-content">
              <text class="overview-label">平均用电</text>
              <text class="overview-value">{{ averageUsage }}</text>
              <text class="overview-unit">kWh</text>
            </view>
          </view>
          
          <view class="overview-item" @tap="showStatDetail('peak')">
            <view class="overview-icon peak-icon">
              <text class="iconfont">🔺</text>
            </view>
            <view class="overview-content">
              <text class="overview-label">峰值用电</text>
              <text class="overview-value">{{ peakUsage }}</text>
              <text class="overview-unit">kWh</text>
            </view>
          </view>
          
          <view class="overview-item" @tap="showStatDetail('valley')">
            <view class="overview-icon valley-icon">
              <text class="iconfont">🔻</text>
            </view>
            <view class="overview-content">
              <text class="overview-label">谷值用电</text>
              <text class="overview-value">{{ valleyUsage }}</text>
              <text class="overview-unit">kWh</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 用电趋势图表 -->
      <view class="card chart-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">用电趋势分析</text>
            <text class="card-subtitle">可视化展示用电量变化趋势</text>
          </view>
          <view class="chart-actions">
            <text class="chart-action" @tap="toggleChartType">
              <text class="action-icon">{{ chartType === 'column' ? '📊' : '📈' }}</text>
              切换图表
            </text>
            <text class="chart-action" @tap="exportChartData">
              <text class="action-icon">📥</text>
              导出数据
            </text>
          </view>
        </view>
        
        <view class="chart-container">
          <view class="chart-placeholder" v-if="!chartData.categories || chartData.categories.length === 0">
            <text class="placeholder-icon">📊</text>
            <text class="placeholder-text">暂无数据</text>
            <text class="placeholder-hint">请选择查询条件获取数据</text>
          </view>
          <qiun-data-charts 
            v-else
            :type="chartType"
            :chartData="chartData"
            :opts="chartOpts"
            :ontouch="true"
            canvasId="analysisChart"
          />
        </view>
        
        <view class="chart-footer">
          <view class="chart-legend">
            <view class="legend-item">
              <view class="legend-color" :style="{'background-color': chartOpts.color[0]}"></view>
              <text class="legend-text">用电量 (kWh)</text>
            </view>
          </view>
          <view class="chart-tips">
            <text class="tip-text">👆 点击图表可查看详细数据</text>
          </view>
        </view>
      </view>
      
      <!-- 对比分析卡片 -->
      <view class="card comparison-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">对比分析</text>
            <text class="card-subtitle">与历史同期数据对比</text>
          </view>
          <view class="card-icon">
            <text class="iconfont">⚖️</text>
          </view>
        </view>
        
        <view class="comparison-content">
          <view class="comparison-item" @tap="showComparisonDetail('month')">
            <view class="comparison-icon monthly">
              <text class="iconfont">🔄</text>
            </view>
            <view class="comparison-info">
              <text class="comparison-label">环比变化</text>
              <text class="comparison-period">较上月</text>
            </view>
            <view class="comparison-value" :class="getComparisonClass(monthOverMonth)">
              <text class="comparison-icon">{{ monthOverMonth >= 0 ? '↗' : '↘' }}</text>
              <text class="comparison-number">{{ Math.abs(monthOverMonth) }}%</text>
            </view>
          </view>
          
          <view class="comparison-divider"></view>
          
          <view class="comparison-item" @tap="showComparisonDetail('year')">
            <view class="comparison-icon yearly">
              <text class="iconfont">📅</text>
            </view>
            <view class="comparison-info">
              <text class="comparison-label">同比变化</text>
              <text class="comparison-period">较去年同期</text>
            </view>
            <view class="comparison-value" :class="getComparisonClass(yearOverYear)">
              <text class="comparison-icon">{{ yearOverYear >= 0 ? '↗' : '↘' }}</text>
              <text class="comparison-number">{{ Math.abs(yearOverYear) }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    // 获取当前日期
    const now = new Date();
    const currentDate = this.formatDate(now);
    const currentMonth = this.formatMonthDate(currentDate);
    const currentYear = this.formatYearDate(currentDate);
    
    // 获取一个月前的日期
    const oneMonthAgo = new Date(now);
    oneMonthAgo.setMonth(now.getMonth() - 1);
    const oneMonthAgoDate = this.formatDate(oneMonthAgo);
    
    return {
      queryType: 'day', // day, month, year
      queryTypes: [
        { label: "日数据", value: "day" },
        { label: "月数据", value: "month" },
        { label: "年数据", value: "year" }
      ],
      
      // 日期范围
      dayStartDate: oneMonthAgoDate,
      dayEndDate: currentDate,
      monthStartDate: oneMonthAgoDate,
      monthEndDate: currentDate,
      yearStartDate: oneMonthAgoDate,
      yearEndDate: currentDate,
      
      // 加载状态
      isLoading: false,
      
      // 统计数据
      totalUsage: "0",
      averageUsage: "0",
      peakUsage: "0",
      valleyUsage: "0",
      monthOverMonth: 0,
      yearOverYear: 0,
      totalTrend: 0,
      
      // 图表类型
      chartType: 'column',
      
      // uCharts 数据
      chartData: {},
      chartOpts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 7
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            barBorderRadius: [6,6,6,6]
          },
          line: {
            width: 4,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      }
    }
  },
  
  methods: {
    // 改变查询类型
    changeQueryType(type) {
      this.queryType = type;
      // 切换类型时重置图表数据
      this.generateChartData();
    },
    
    // 切换图表类型
    toggleChartType() {
      this.chartType = this.chartType === 'column' ? 'line' : 'column';
    },
    
    // 日期选择器变化事件
    onDayStartDateChange(e) {
      this.dayStartDate = e.detail.value;
    },
    
    onDayEndDateChange(e) {
      this.dayEndDate = e.detail.value;
    },
    
    onMonthStartDateChange(e) {
      this.monthStartDate = e.detail.value;
    },
    
    onMonthEndDateChange(e) {
      this.monthEndDate = e.detail.value;
    },
    
    onYearStartDateChange(e) {
      this.yearStartDate = e.detail.value;
    },
    
    onYearEndDateChange(e) {
      this.yearEndDate = e.detail.value;
    },
    
    // 处理查询
    handleQuery() {
      // 验证日期范围
      if (!this.validateDateRange()) {
        uni.showToast({
          title: '开始日期不能晚于结束日期',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      this.isLoading = true;
      
      uni.showLoading({
        title: '查询中...',
        mask: true
      });
      
      // 模拟查询延迟
      setTimeout(() => {
        this.generateChartData();
        this.calculateStats();
        this.isLoading = false;
        uni.hideLoading();
        
        uni.showToast({
          title: '查询完成',
          icon: 'success',
          duration: 1500
        });
      }, 1500);
    },
    
    // 验证日期范围
    validateDateRange() {
      let start, end;
      
      if (this.queryType === 'day') {
        start = new Date(this.dayStartDate);
        end = new Date(this.dayEndDate);
      } else if (this.queryType === 'month') {
        start = new Date(this.monthStartDate);
        end = new Date(this.monthEndDate);
      } else if (this.queryType === 'year') {
        start = new Date(this.yearStartDate);
        end = new Date(this.yearEndDate);
      }
      
      return start <= end;
    },
    
    // 生成图表数据
    generateChartData() {
      let categories = [];
      let seriesData = [];
      
      if (this.queryType === 'day') {
        // 生成日数据
        const startDate = new Date(this.dayStartDate);
        const endDate = new Date(this.dayEndDate);
        const daysDiff = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
        
        // 限制最大显示天数
        const maxDays = 31;
        const displayDays = Math.min(daysDiff, maxDays);
        
        for (let i = 0; i < displayDays; i++) {
          const currentDate = new Date(startDate);
          currentDate.setDate(startDate.getDate() + i);
          
          categories.push(this.formatDate(currentDate, 'MM-DD'));
          // 生成更明显的数值，确保柱子可见
          seriesData.push(parseFloat((10 + Math.random() * 20).toFixed(1)));
        }
      } 
      else if (this.queryType === 'month') {
        // 生成月数据
        const startDate = new Date(this.monthStartDate);
        const endDate = new Date(this.monthEndDate);
        
        let current = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
        const end = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
        
        while (current <= end) {
          categories.push(this.formatMonthDate(current));
          // 生成更明显的数值
          seriesData.push(parseFloat((150 + Math.random() * 150).toFixed(1)));
          
          current.setMonth(current.getMonth() + 1);
        }
      } 
      else if (this.queryType === 'year') {
        // 生成年数据
        const startYear = new Date(this.yearStartDate).getFullYear();
        const endYear = new Date(this.yearEndDate).getFullYear();
        
        for (let year = startYear; year <= endYear; year++) {
          categories.push(year.toString());
          // 生成更明显的数值
          seriesData.push(parseFloat((1200 + Math.random() * 800).toFixed(1)));
        }
      }
      
      // 更新图表数据
      this.chartData = {
        categories: categories,
        series: [
          {
            name: "用电量",
            data: seriesData,
          }
        ]
      };
    },
    
    // 计算统计数据
    calculateStats() {
      if (!this.chartData.series || !this.chartData.series[0]) return;
      
      const data = this.chartData.series[0].data;
      const total = data.reduce((sum, value) => sum + value, 0);
      const average = total / data.length;
      const peak = Math.max(...data);
      const valley = Math.min(...data);
      
      this.totalUsage = total.toFixed(1);
      this.averageUsage = average.toFixed(1);
      this.peakUsage = peak.toFixed(1);
      this.valleyUsage = valley.toFixed(1);
      
      // 模拟环比和同比数据
      this.monthOverMonth = parseFloat((Math.random() * 20 - 10).toFixed(1));
      this.yearOverYear = parseFloat((Math.random() * 15 - 5).toFixed(1));
      this.totalTrend = parseFloat((Math.random() * 15 - 5).toFixed(1));
    },
    
    // 获取对比样式类
    getComparisonClass(value) {
      return value >= 0 ? 'positive' : 'negative';
    },
    
    // 显示统计详情
    showStatDetail(type) {
      const titles = {
        total: '总用电量',
        average: '平均用电量',
        peak: '峰值用电量',
        valley: '谷值用电量'
      };
      
      uni.showToast({
        title: `${titles[type]}详情`,
        icon: 'none',
        duration: 1500
      });
    },
    
    // 显示对比详情
    showComparisonDetail(type) {
      const titles = {
        month: '环比分析',
        year: '同比分析'
      };
      
      uni.showToast({
        title: `${titles[type]}详情`,
        icon: 'none',
        duration: 1500
      });
    },
    
    // 导出图表数据
    exportChartData() {
      uni.showActionSheet({
        itemList: ['导出为图片', '导出为CSV', '分享数据'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.showToast({
              title: '图片导出功能开发中',
              icon: 'none'
            });
          } else if (res.tapIndex === 1) {
            uni.showToast({
              title: 'CSV导出功能开发中',
              icon: 'none'
            });
          } else if (res.tapIndex === 2) {
            uni.showToast({
              title: '分享功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 获取当前日期
    getCurrentDate() {
      const now = new Date();
      return this.formatDate(now, 'YYYY年MM月DD日');
    },
    
    // 格式化显示日期
    formatDisplayDate(date, type) {
      if (type === 'day') {
        return this.formatDate(date, 'MM月DD日');
      } else if (type === 'month') {
        return this.formatMonthDate(date).replace('-', '年') + '月';
      } else if (type === 'year') {
        return this.formatYearDate(date) + '年';
      }
      return date;
    },
    
    // 日期格式化辅助方法
    formatDate(date, format = 'YYYY-MM-DD') {
      if (typeof date === 'string') {
        date = new Date(date);
      }
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      
      if (format === 'MM-DD') {
        return `${month}-${day}`;
      } else if (format === 'YYYY年MM月DD日') {
        return `${year}年${month}月${day}日`;
      } else if (format === 'MM月DD日') {
        return `${month}月${day}日`;
      }
      
      return `${year}-${month}-${day}`;
    },
    
    formatMonthDate(date) {
      if (typeof date === 'string') {
        date = new Date(date);
      }
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      
      return `${year}-${month}`;
    },
    
    formatYearDate(date) {
      if (typeof date === 'string') {
        date = new Date(date);
      }
      
      return date.getFullYear().toString();
    }
  },
  
  onLoad() {
    // 页面加载时初始化数据
    this.generateChartData();
    this.calculateStats();
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f1 100%);
}

.status-bar {
  height: var(--status-bar-height);
  background: transparent;
}

.page-content {
  flex: 1;
  padding: 30rpx 30rpx 140rpx;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40rpx;
  padding: 0 10rpx;
}

.header-main {
  flex: 1;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12rpx;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.date-indicator {
  background: rgba(24, 144, 255, 0.1);
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
}

.current-date {
  font-size: 24rpx;
  color: #1890ff;
  font-weight: 500;
}

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx;
  margin-bottom: 30rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.card:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.card-title-section {
  flex: 1;
}

.card-title {
  display: block;
  font-size: 34rpx;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.card-subtitle {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  color: #1890ff;
  font-size: 36rpx;
}

.stats-icon {
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  color: #52c41a;
}

/* 查询卡片样式 */
.query-content {
  margin-top: 10rpx;
}

.query-type-selector {
  display: flex;
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 6rpx;
  margin-bottom: 40rpx;
  position: relative;
}

.type-option {
  flex: 1;
  padding: 20rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  border-radius: 16rpx;
  transition: all 0.3s ease;
  position: relative;
}

.type-first {
  border-radius: 16rpx 0 0 16rpx;
}

.type-last {
  border-radius: 0 16rpx 16rpx 0;
}

.type-text {
  position: relative;
  z-index: 2;
  font-weight: 500;
}

.type-active {
  color: #1890ff;
  font-weight: 600;
}

.type-indicator {
  position: absolute;
  top: 6rpx;
  left: 6rpx;
  right: 6rpx;
  bottom: 6rpx;
  background: white;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
  z-index: 1;
}

.date-range-selector {
  margin-bottom: 40rpx;
}

.date-picker-group {
  display: flex;
  align-items: flex-end;
  gap: 20rpx;
}

.date-picker-item {
  flex: 1;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.picker-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.picker-hint {
  font-size: 22rpx;
  color: #999;
}

.date-separator {
  padding-bottom: 40rpx;
}

.separator-line {
  color: #ccc;
  font-size: 24rpx;
  font-weight: 300;
}

.picker-value {
  height: 88rpx;
  line-height: 88rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 0 28rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  border: 2rpx solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.picker-value:active {
  background: #f0f7ff;
  border-color: #1890ff;
}

.picker-date {
  font-weight: 500;
}

.picker-arrow {
  color: #999;
  font-size: 20rpx;
}

.query-btn-container {
  margin-top: 10rpx;
}

.query-btn {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
  height: 96rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.query-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
}

.query-btn-loading {
  opacity: 0.8;
}

.btn-text {
  font-weight: 600;
}

.loading-spinner {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.loading-text {
  font-size: 28rpx;
}

.spinner {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid rgba(255,255,255,0.3);
  border-top: 3rpx solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 数据概览样式 */
.stats-overview {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.overview-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #fafbfc;
  border-radius: 20rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.overview-item:active {
  background: #f0f7ff;
  border-color: #1890ff;
  transform: translateY(-2rpx);
}

.overview-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  font-size: 36rpx;
}

.total-icon {
  background: linear-gradient(135deg, #fff7e6 0%, #ffd591 100%);
  color: #fa8c16;
}

.average-icon {
  background: linear-gradient(135deg, #f6ffed 0%, #b7eb8f 100%);
  color: #52c41a;
}

.peak-icon {
  background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
  color: #ff4d4f;
}

.valley-icon {
  background: linear-gradient(135deg, #f0f5ff 0%, #adc6ff 100%);
  color: #2f54eb;
}

.overview-content {
  flex: 1;
}

.overview-label {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.overview-value {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4rpx;
}

.overview-unit {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.trend-icon {
  font-size: 24rpx;
}

.trend-value {
  font-size: 24rpx;
  font-weight: 600;
}

.trend-up {
  color: #ff4d4f;
}

.trend-down {
  color: #52c41a;
}

/* 图表卡片样式 */
.chart-actions {
  display: flex;
  gap: 16rpx;
}

.chart-action {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #1890ff;
  padding: 12rpx 20rpx;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.chart-action:active {
  background: rgba(24, 144, 255, 0.2);
}

.action-icon {
  font-size: 24rpx;
}

.chart-container {
  width: 100%;
  height: 500rpx;
  margin: 20rpx 0;
  border-radius: 16rpx;
  overflow: hidden;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  border-radius: 16rpx;
  border: 2rpx dashed #e8e8e8;
}

.placeholder-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.placeholder-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.placeholder-hint {
  font-size: 24rpx;
  color: #ccc;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.chart-legend {
  display: flex;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 24rpx;
  height: 24rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
}

.legend-text {
  font-size: 24rpx;
  color: #666;
}

.chart-tips {
  display: flex;
}

.tip-text {
  font-size: 22rpx;
  color: #999;
}

/* 对比分析样式 */
.comparison-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comparison-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  transition: all 0.3s ease;
}

.comparison-item:active {
  background: #fafbfc;
  border-radius: 16rpx;
  transform: translateX(4rpx);
}

.comparison-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  font-size: 36rpx;
}

.monthly {
  background: linear-gradient(135deg, #f0f5ff 0%, #d6e4ff 100%);
  color: #2f54eb;
}

.yearly {
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  color: #52c41a;
}

.comparison-info {
  flex: 1;
}

.comparison-label {
  display: block;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 6rpx;
}

.comparison-period {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.comparison-value {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 24rpx;
  border-radius: 20rpx;
  font-weight: 600;
}

.comparison-value.positive {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.comparison-value.negative {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.comparison-number {
  font-size: 32rpx;
  font-weight: 700;
}

.comparison-divider {
  height: 2rpx;
  background: linear-gradient(90deg, transparent 0%, #e8e8e8 50%, transparent 100%);
  margin: 0 20rpx;
}
</style>